<template>
	<div>
		<el-row :gutter="80" style="margin-bottom: 20px; margin-right: 20px">
			<el-col :span="6"
				><div @click="to('adminItem')" class="nav" style="background: #d1e5e5">
					动漫管理
				</div></el-col
			>
			<el-col :span="6"
				><div
					@click="to('adminArticle')"
					class="nav"
					style="background: #d1e5e5"
				>
					章节管理
				</div></el-col
			>
			<el-col :span="6"
				><div @click="to('adminUser')" class="nav" style="background: #d1e5e5">
					用户管理
				</div></el-col
			>
			<el-col :span="6"
				><div
					@click="to('adminInteract')"
					class="nav"
					style="background: #d1e5e5"
				>
					轮播管理
				</div></el-col
			>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="12">
				<v-chart class="chart" :option="optionEdg" autoresize />
			</el-col>
			<el-col :span="12">
				<v-chart class="chart" :option="optionExp" autoresize />
			</el-col>
		</el-row>
	</div>
</template>
<script setup lang="ts">
import { use } from 'echarts/core'
import { isDark } from 'vue-dark-switch'
import { PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent,
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import type { EChartsOption } from 'echarts'
use([
	CanvasRenderer,
	PieChart,
	TitleComponent,
	TooltipComponent,
	LegendComponent,
])

provide(
	THEME_KEY,
	computed(() => (isDark.value ? 'dark' : '')),
)
function to(href: string) {
	window.location.href = href
}
const optionEdg = ref<EChartsOption>({
	title: {
		text: '不同类型占比分析',
		left: 'center',
	},
	tooltip: {
		trigger: 'item',
		formatter: '{a} <br/>{b} : {c} ({d}%)',
	},
	legend: {
		orient: 'vertical',
		left: 'left',
		data: ['系统', '搞笑', '灵异', '女神', '怪物', '重生'],
	},
	series: [
		{
			name: '数量',
			type: 'pie',
			radius: '55%',
			center: ['50%', '60%'],
			data: [
				{ value: 335, name: '系统' },
				{ value: 810, name: '搞笑' },
				{ value: 234, name: '灵异' },
				{ value: 135, name: '女神' },
				{ value: 320, name: '怪物' },
				{ value: 220, name: '重生' },
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)',
				},
			},
		},
	],
})
const optionExp = ref<EChartsOption>({
	title: {
		text: '收藏数量分析',
		left: 'center',
	},
	tooltip: {
		trigger: 'item',
		formatter: '{a} <br/>{b} : {c} ({d}%)',
	},
	legend: {
		orient: 'vertical',
		left: 'left',
		data: ['独家', '签约'],
	},
	series: [
		{
			name: '数量',
			type: 'pie',
			radius: '55%',
			center: ['50%', '60%'],
			data: [
				{ value: 335, name: '独家' },
				{ value: 448, name: '签约' },

			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)',
				},
			},
		},
	],
})
</script>

<style>
.chart {
	width: 100%;
	height: 400px;
}
.nav {
	font-size: 20px;
	cursor: pointer;
	width: 100%;
	height: 150px;
	border-radius: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	text-align: center;
}
</style>
<route lang="json">
{
	"meta": {
		"title": "后台",
		"layout": "admin"
	}
}
</route>
